<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:fragment="head">

    <meta charset="utf-8">
    <title >ESLLET</title>
    <!-- Tell the browser to be responsive to screen width -->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css"/>
    <!-- DataTables -->
    <link rel="stylesheet" th:href="@{/plugins/datatables/dataTables.bootstrap4.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}">
    <!-- Google Font: Source Sans Pro -->
    <!--<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">-->
    <!--<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
    <link rel="stylesheet" th:href="@{/plugins/select2/select2.min.css}">
    <style>
        .ng-cloak {display: none;}
    </style>
</head>
<body>
    <header th:fragment="header">
        <nav class="main-header navbar navbar-expand navbar-light bg-write border-bottom">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item"  data-toggle="tooltip" data-placement="right" title="显示/隐藏左侧菜单栏">
                    <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
                </li>

            </ul>
            <img src="../../dist/img/esllet.png"/>
            <!-- Right navbar links -->
            <ul class="navbar-nav ml-auto">
                <!-- Messages Dropdown Menu -->

                <li class="nav-item nav-link">
                    <span  th:text="#{app.language}"></span>
                    <a href="?lang=en_US" > English</a>/
                    <a href="?lang=zh_CN" > 中文</a>

                </li>
                <li>
                    <form th:action="@{/logout}" method="post" style="margin-top: 0">
                        <input type="submit" class="btn btn-small btn-default" th:value="#{app.logout}"/>
                    </form>
                </li>
                <!-- Notifications Dropdown Menu -->
                <!--<li class="nav-item">-->
                    <!--<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">-->
                        <!--<i class="fa fa-th-large"></i>-->
                    <!--</a>-->
                <!--</li>-->
            </ul>
        </nav>
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-2">
            <!-- Brand Logo -->
            <a href="#" class="brand-link">
                <img src="../../dist/img/AdminLTELogo.png"

                class="brand-image img-circle elevation-3"
                style="opacity: .8">
                <span class="brand-text font-weight-light">ESLLET</span>
            </a>

            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar user (optional) -->

                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <img src="../../dist/img/avatar5.png" class="img-circle elevation-2" alt="User Image">
                    </div>
                    <div class="info">
                        <span style="color:white"><a href="#" style="color:greenyellow">[[${user.username}]]</a> ,[[#{app.welcome}]]</span>
                    </div>
                </div>
                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <!-- Add icons to the links using the .nav-icon class
                             with font-awesome or any other icon font library -->

                        <li class="nav-item">
                            <a href="/esl_manager" class="nav-link {{menu.esl?'active':''}}">
                                <i class="fa fa-barcode nav-icon"></i>
                                <p th:text="#{menu_esl_manager}">Simple Tables</p>
                            </a>
                        </li>
                        <li sec:authorize="hasRole('ROLE_ADMIN')" class="nav-item">
                            <a href="/ap_manager" class="nav-link {{menu.ap?'active':''}}">
                                <i class="fa fa-rss-square nav-icon"></i>
                                <p th:text="AP管理"></p>
                            </a>
                        </li>
                        <li sec:authorize="hasRole('ROLE_ADMIN')" class="nav-item">
                            <a href="/menu/user_manager" class="nav-link {{menu.user?'active':''}}">
                                <!--<i class="fa fa-address-book"></i>-->
                                <i class="fa fa-users nav-icon"></i>
                                <p th:text="#{menu_user_manager}">Data Tables</p>
                            </a>
                        </li>
                        <li sec:authorize="hasRole('ROLE_SUPPERADMIN')" class="nav-item">
                            <a href="/menu/role_manager" class="nav-link {{menu.role?'active':''}}">
                                <!--<i class="fa fa-address-book"></i>-->
                                <i class="fa fa-user-circle nav-icon"></i>
                                <p >角色管理</p>
                            </a>
                        </li>
                        <li sec:authorize="hasRole('ROLE_ADMIN')" class="nav-item">
                            <a href="/menu/store_manager" class="nav-link {{menu.store?'active':''}}">
                                <!--<i class="fa fa-address-book"></i>-->
                                <i class="fa fa-home nav-icon"></i>
                                <p >门店管理</p>
                            </a>
                        </li>
                    </ul>
                </nav>
                <!-- /.sidebar-menu -->
            </div>
            <!-- /.sidebar -->
        </aside>
    </header>

    <!--分页查询-->
    <navigation th:fragment="page">
        <div class="row">
            <div class="col-sm-12 col-md-3">
                <span>[[#{page.enties1}]]{{pagination.totalElements}} [[#{page.enties2}]]，[[#{page.page1}]] {{pagination.number + 1}} [[#{page.page2}]] ，[[#{page.total1}]] {{pagination.totalPages}} [[#{page.total2}]] </span>
            </div>
            <div class="col-sm-12 col-md-3" >
                                    <span>[[#{page.show}]]
                                      <select id="id_size" ng-model="size" ng-change="changeSize()" class="form-control-sm">

                                      <option ng-selected="true">10</option>
                                      <option>20</option>
                                      <option>50</option>
                                          <option>100</option>
                                    </select>
                                      [[#{page.records}]]
                                  </span>
            </div>
            <div class="col-sm-12 col-md-6">

                <ul class="pagination pagination-sm no-margin pull-right">
                    <li>
                        <div class="input-group margin">
                        <button style="margin:0px" class="btn btn-default" ng-click="gotoPage(inputPage-1)">go</button>
                        <input class="form-control" style="width:100px;margin-right: 20px;" type="number" ng-model="inputPage" />
                        </div>
                    </li>
                    <li ng-repeat="page in pagination.pages">
                        <button class="btn btn-default" ng-click="gotoPage(page.page)">{{page.title}}</button>

                    </li>

                </ul>
            </div>
        </div>
    </navigation>
    <navigation th:fragment="footer">
        <!-- data-backdrop="false"去除遮罩层  -->
        <div class="modal fade "  id="myModal" role="dialog" data-backdrop="false"  aria-hidden="true" >
            <div class="modal-dialog modal-sm" style="margin-top:300px;">

                <p class="btn btn-lg"  style="background: #000;color:white">
                    <i class="fa fa-check-circle text-success mr-1" aria-hidden="true"></i>
                    操作成功
                </p>

            </div>
        </div>
    <footer class="main-footer">
        <div class="float-right d-none d-sm-block">
            <b>Version</b> ESL-SN-1.10.1
        </div>
        <strong><a href="#">ESLLET</a>.</strong> All rights
        reserved.
    </footer>


        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
        </aside>
        <!-- /.control-sidebar -->
    </navigation>
    <navigation th:fragment="js">

        <!-- jQuery -->
        <script th:src="@{/plugins/jquery/jquery.min.js}"></script>
        <!-- Bootstrap 4 -->
        <script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
        <!-- DataTables -->
        <script th:src="@{/plugins/datatables/jquery.dataTables.js}"></script>
        <script th:src="@{/plugins/datatables/dataTables.bootstrap4.js}"></script>
        <!-- SlimScroll -->
        <script th:src="@{/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
        <!-- FastClick -->
        <script th:src="@{/plugins/fastclick/fastclick.js}"></script>
        <!-- AdminLTE App -->
        <script th:src="@{/dist/js/adminlte.min.js}"></script>
        <!-- AdminLTE for demo purposes -->
        <!--<script th:src="@{/dist/js/demo.js}"></script>-->


        <script th:src="@{/js/angular.min.js}"></script>
        <!-- page script -->
        <script th:inline="javascript" th:src="@{/js/common.js}" ></script>
        <script>
            function alertSuccess(){
                $('#myModal').modal('show');
                setTimeout(function(){
                    $("#myModal").modal("hide")
                },1200);
            }

        </script>
    </navigation>

</body>
</html>